<template>
	<div class="head">
		<el-menu id="horizontal" :default-active="activeIndex" :router='true' class="el-menu-demo" mode="horizontal" @select="handleSelect">
			<el-menu-item index="" id="logo1"><img src="http://f12.baidu.com/it/u=4049507177,437334500&fm=72" />
			</el-menu-item>
			<el-menu-item index="/">首页</el-menu-item>
			<el-submenu  index="2">
				<template slot="title">书院简介</template>
				<el-menu-item index="/abstract">简介1</el-menu-item>
				<el-menu-item index="2-2">选项2</el-menu-item>
				<el-menu-item index="2-3">选项3</el-menu-item>
			</el-submenu>
			<el-submenu  index="3">
				<template slot="title">书院公共文件</template>
				<el-menu-item index="/list">书院公共文件1</el-menu-item>
				<el-menu-item index="2-2">选项2</el-menu-item>
				<el-menu-item index="2-3">选项3</el-menu-item>
			</el-submenu>
			<el-submenu  index="4">
				<template slot="title">公益慈善</template>
				<el-menu-item index="/listWord">公益慈善1</el-menu-item>
				<el-menu-item index="2-2">选项2</el-menu-item>
				<el-menu-item index="2-3">选项3</el-menu-item>
			</el-submenu>
			<el-menu-item  index="5">国学</el-menu-item>
			<el-menu-item  index="6">招生</el-menu-item>
			<el-menu-item  index="7">文化建设</el-menu-item>
			<el-menu-item  index="8">正文</el-menu-item>

		</el-menu>

		<el-menu id="vertical" :default-active="activeIndex" :router='true' class="el-menu-demo" mode="vertical" @select="handleSelect">
			<el-menu-item index="" id="logo2"><img src="http://f12.baidu.com/it/u=4049507177,437334500&fm=72" />
				<span id="switch" @click="toggleNav">
			  	<img src="../assets/nav.png"/>
			  </span>
			</el-menu-item>
			<el-submenu  class="nav_item" index="2">
				<template slot="title">书院简介</template>
				<el-menu-item index="/abstract">简介1</el-menu-item>
				<el-menu-item index="2-2">选项2</el-menu-item>
				<el-menu-item index="2-3">选项3</el-menu-item>
			</el-submenu>
			<el-submenu class="nav_item"  index="3">
				<template slot="title">书院公共文件</template>
				<el-menu-item index="/list">书院公共文件1</el-menu-item>
				<el-menu-item index="2-2">选项2</el-menu-item>
				<el-menu-item index="2-3">选项3</el-menu-item>
			</el-submenu>
			<el-submenu  class="nav_item" index="4">
				<template slot="title">公益慈善</template>
				<el-menu-item index="/listWord">公益慈善1</el-menu-item>
				<el-menu-item index="2-2">选项2</el-menu-item>
				<el-menu-item index="2-3">选项3</el-menu-item>
			</el-submenu>
			<el-menu-item class="nav_item" index="5">国学</el-menu-item>
			<el-menu-item class="nav_item" index="6">招生</el-menu-item>
			<el-menu-item class="nav_item" index="7">文化建设</el-menu-item>
			<el-menu-item class="nav_item" index="8">正文</el-menu-item>

		</el-menu>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				activeIndex: '1',
				isSwitch: false,
				flag: "block",
				model: "horizontal"
			};
		},
		methods: {
			handleSelect(key, keyPath) {

			},
			toggleNav() {
				$(".nav_item").slideToggle()
			},
			hideNav() {
				$(document).scroll(
					() => {
						if($(document).scrollTop() > 0 && window.innerWidth < 1024) {
							$(".nav_item").hide();
						}
					}
				)


			},
			changeCss(){
				$('.el-menu--horizontal>.el-submenu .el-submenu__title').css({
				"height": "80px",
				"line-height": "80px"
				})
				
//				$(".el-submenu__title").css("color","#fff")
				
			}
		},
		mounted() {
			this.hideNav();
			this.changeCss();

		}
	}

</script>

<style scoped="scoped">
	.el-menu-demo {
		height: 80px;
	}
	
	.el-menu--horizontal {
		margin-right: 5%;
	}
	
	.el-menu--horizontal>.el-menu-item {
		height: 80px;
		line-height: 80px;
	}
	
	#logo1 {
		float: left;
		height: 60px;
		margin-left: 3%;
		margin-right: 6%;
	}
	
	#logo1 img {
		height: 100%;
	}
	
	#logo2 {
		width: 100%;
		float: none;
		height: 80px;
	}
	
	#logo2:hover {
		background: white;
	}
	
	#logo2 img {
		height: 100%;
	}
	
	#switch {
		display: block;
		position: absolute;
		right: 5%;
		top: 50%;
		transform: translate(0, -50%);
	}
	#switch img{width: 32px;
	border: 1px solid darkgray;
    padding: 3px;
    border-radius: 5px;
    }
	#horizontal {
		display: block;
	}
	
	#vertical {
		display: none;
	}
	#vertical>li{z-index: 999;background: #FFFFFF;}
	#vertical li{border-bottom: 1px solid gainsboro;}
	
	@media screen and (max-width: 1024px) {	
		#horizontal {
			display: none;
		}
		#vertical {
			display: block;
			
		}
	}
</style>